<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">


<script type="text/javascript"src="js/jquery-1.7.2.min.js"></script>

<script src="js/myPagination/jquery.myPagination6.0.js" type="text/javascript"> </script>

<link rel="stylesheet" type="text/css" href="js/myPagination/page.css" />


<style type="text/css">

#fenye{
  width: 500px;
}
.prev{
	border-left:5px dashed transparent;
	border-bottom:5px dashed transparent;
	border-top:5px dashed transparent;
	border-right:5px solid #036cb4;
	margin-right:5px;
}
.next{
	border-left:5px solid #036cb4;
	border-bottom:5px dashed transparent;
	border-top:5px dashed transparent;
	border-right:5px dashed transparent;
	margin-left:5px;
}
.prevNext{
	display:inline-block;
	vertical-align:middle;
}


</style>

</head>


<script type="text/javascript">
	$(function(){
	   
	   loadData();
	   //注意顺序
	   var num_entries = $("#Searchresult li").length;	  //总条数
	   var showCount = 8;   //每页显示几条
	   
	   //启用分页
	    fenye(num_entries,showCount);
	   //展示第一页
        showData(1,num_entries,showCount);
	})
	
	
	//加载数据
	function  loadData(){
	  var json='${plist}';
	  var jsonData = eval(json);
		$.each(jsonData,function(i,n){
			$("#Searchresult").append("<li>"+(i+1)+"-----"+n.name+"</li>");  //隐藏数据
		});
    }
	
	
	//启用分页
	function  fenye(num_entries,showCount){
		//总页数
		var pageNum=num_entries%showCount==0?num_entries/showCount:num_entries/showCount+1
		
		//要执行的方法体
        $("#fenye").myPagination({
			  currPage: 1,
	          pageCount: pageNum,  //总页数
	          pageNumber:5,  // 最多显示几个页码
	          cssStyle:"manu",
	          ajax: {
	            on: false,
	            onClick: function(page_index) {
	            	     showData(page_index,num_entries,showCount);
	                  }
	          },
	       	  panel:{
	       		  last:"末页",
	       		  next:"下一页<div class='next prevNext'></div>",
	       		  prev:"<div class='prev prevNext'></div>上一页"
	       	  }
	        });
	}
	
	//展示数据
	function showData(page_index,num_entries,showCount){
		var max_elem = Math.min((page_index) *showCount, num_entries);
				
		$("#htcList").html("");		//清空div
		for(var i=(page_index-1)*showCount; i<max_elem; i++){
			var new_content = $("#Searchresult li:eq("+i+")").clone();
			  $("#htcList").append(new_content); //装载对应分页的内容
		}
		return false;
	}
</script>



<body>
	<div id="fenye"></div>
	
	<div id="model">
		<ul id="htcList">
		</ul>
		
		
		<ul id="Searchresult" style="display: none;">
		</ul>
	</div>

</body>
</html>
